<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>欢迎注册通讯录系统</title>
<script src="js/jquery.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
	var booleanArray = [false,false,false,false,false,false,false,false,false,false,false,false,false];
	var timeoutId1;
	function checkButton(index,bo){
		booleanArray[index] = bo;
		if(bo){
			var flag;
			for(var i=0;i<booleanArray.length;i++){
				if(!booleanArray[i]){
					return;
				}
			}
			document.getElementById("submit").disabled=false;
		}else{
			document.getElementById("submit").disabled=true;	
		}
	}
	function checkUserName(){
		var userName = $("#userName").val();
		userName = new String(userName);
		if(userName.length>0){
			if(CheckUserName_(userName)){
				userName = encodeURI(userName);
				clearTimeout(timeoutId1);
       			timeoutId1 = setTimeout(function(){
				$.post("checkExistedUserName?user.userName="+userName,function(data){
						var res = data;
						if(res=="true"){
							checkButton(0,true);
							$("#font1").attr("color","green");
							$("#font1").html("<img src=\"images/check_right.gif\"/>您输入的用户名可以使用");
						}else{
							checkButton(0,false);
							$("#font1").attr("color","red");
							$("#font1").html("<img src=\"images/check_error.gif\"/>&nbsp;您输入的用户名已被注册,请重新输入");
						}
					},"text")
				},300);
			}else{
				clearTimeout(timeoutId1);
				checkButton(0,false);
				$("#font1").attr("color","red");
				$("#font1").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入正确的用户名");
			}
			
		}else{
			clearTimeout(timeoutId1);
			checkButton(0,false);
			$("#font1").attr("color","red");
			$("#font1").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入用户名");
		}
		
	}
	
	function checkPasswordIsSame(){
		var password1 = $("#password").val();
		var password2 = $("#password2").val();
		if(password1.length>=6&&password1.length<=16){
			checkButton(1,true);
			$("#font2").attr("color","green");
			$("#font2").html("<img src=\"images/check_right.gif\"/>&nbsp;密码符合6-16位的要求");
		}else{
			checkButton(1,false);
			$("#font2").attr("color","red");
			$("#font2").html("<img src=\"images/check_error.gif\"/>&nbsp;您输入的密码不符合要求!请输入6-16位密码");
		}
		if(issame(password1,password2)){
			checkButton(2,true);
			$("#font3").attr("color","green");
			$("#font3").html("<img src=\"images/check_right.gif\"/>&nbsp;密码输入相同");
		}else{
			checkButton(1,false);
			$("#font3").attr("color","red");
			$("#font3").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入相同的密码");
		}
	}
	function checkFirstName(){
		var firstName = trim($("#firstName").val());
		if(/^[a-zA-Z ]{1,20}$/.test(firstName)||/^[\u4e00-\u9fa5]{1,10}$/.test(firstName)){
			checkButton(3,true);
			$("#font4").attr("color","green");
			$("#font4").html("<img src=\"images/check_right.gif\"/>");
		}else{
			checkButton(3,false);
			$("#font4").attr("color","red");
			$("#font4").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的姓氏");
		}
	}
	
	function checkSecondName(){
		var secondName = trim($("#secondName").val());
		if(/^[a-zA-Z ]{1,20}$/.test(secondName)||/^[\u4e00-\u9fa5]{1,10}$/.test(secondName)){
			checkButton(4,true);
			$("#font5").attr("color","green");
			$("#font5").html("<img src=\"images/check_right.gif\"/>");
		}else{
			checkButton(4,false);
			$("#font5").attr("color","red");
			$("#font5").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的名字");
		}
	}
	
	function checkEmail(){
		var email = $("#email").val();
		if(CheckEmail(email)){
			checkButton(5,true);
			$("#font6").attr("color","green");
			$("#font6").html("<img src=\"images/check_right.gif\"/>&nbsp;电子邮件地址正确");
		}else{
			checkButton(5,false);
			$("#font6").attr("color","red");
			$("#font6").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入正确的电子邮件地址");
		}
	}
	
	function checkQuestion1() {
		var question1 = trim($("#question1").val());
		if(question1.length>0){
			checkButton(6,true);
			$("#font8").attr("color","green");
			$("#font8").html("<img src=\"images/check_right.gif\"/>&nbsp;");
		}else{
			checkButton(6,false);
			$("#font8").attr("color","red");
			$("#font8").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的第一个提示问题");
		}
	}
	function checkAnaswer1(){
		var answer1 = trim($("#answer1").val());
		if(answer1.length>0){
			checkButton(7,true);
			$("#font9").attr("color","green");
			$("#font9").html("<img src=\"images/check_right.gif\"/>&nbsp;");
		}else{
			checkButton(7,false);
			$("#font9").attr("color","red");
			$("#font9").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的答案");
		}
	}
	function checkQuestion2() {
		var question2 = trim($("#question2").val());
		if(question2.length>0){
			checkButton(8,true);
			$("#font10").attr("color","green");
			$("#font10").html("<img src=\"images/check_right.gif\"/>&nbsp;");
		}else{
			checkButton(8,false);
			$("#font10").attr("color","red");
			$("#font10").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的第一个提示问题");
		}
	}
	function checkAnaswer2(){
		var answer2 = trim($("#answer2").val());
		if(answer2.length>0){
			checkButton(9,true);
			$("#font11").attr("color","green");
			$("#font11").html("<img src=\"images/check_right.gif\"/>&nbsp;");
		}else{
			checkButton(9,false);
			$("#font11").attr("color","red");
			$("#font11").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的答案");
		}
	}
	function checkQuestion3() {
		var question3 = trim($("#question3").val());
		if(question3.length>0){
			checkButton(10,true);
			$("#font12").attr("color","green");
			$("#font12").html("<img src=\"images/check_right.gif\"/>&nbsp;");
		}else{
			checkButton(10,false);
			$("#font12").attr("color","red");
			$("#font12").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的第一个提示问题");
		}
	}
	function checkAnaswer3(){
		var answer3 = trim($("#answer3").val());
		if(answer3.length>0){
			checkButton(11,true);
			$("#font13").attr("color","green");
			$("#font13").html("<img src=\"images/check_right.gif\"/>&nbsp;");
		}else{
			checkButton(11,false);
			$("#font13").attr("color","red");
			$("#font13").html("<img src=\"images/check_error.gif\"/>&nbsp;请输入您的答案");
		}
	}
	
	function reloadImage(){
    var img = $("#pic");
	var num= Math.random()*100;
    img.attr("src","code.jsp?"+num);
	check();
 	}
	
	var timeoutId2;
	function check(){
		var inputcode = $("#checkcode").val();
		clearTimeout(timeoutId2);
       	timeoutId2 = setTimeout(function(){
			$.post(
					"checkCode",{inputCode:inputcode},function(data){
						var res = data;
						if(res=="true"){
							checkButton(12,true);
							$("#font14").attr("color","green");
							$("#font14").html("<img src=\"images/check_right.gif\"/>验证码输入正确");
						}else{
							checkButton(12,false);
							$("#font14").attr("color","red");
							$("#font14").html("<img src=\"images/check_error.gif\"/>&nbsp;验证码输入错误");
						}
			},"text")
		},500);
	}
	function send(){
		$.post("regist",{
			'user.userName':$("#userName").val(),
			'user.password':$("#password").val(),
			'user.firstName':$("#firstName").val(),
			'user.secondName':$("#secondName").val(),
			'user.sex':$("input[name=user.sex][checked]").val(),
			'user.email':$("#email").val(),
			'user.question1':$("#question1").val(),
			'user.answer1':$("#answer1").val(),
			'user.question2':$("#question2").val(),
			'user.answer2':$("#answer2").val(),
			'user.question3':$("#question3").val(),
			'user.answer3':$("#answer3").val()
		},function(data){
			if(data="true"){
				alert("注册成功");
			}else{
				alert("注册失败,请稍后重试!");
			}
			window.parent.tb_remove();
		},"text")
	}
</script>
<style>body {
	background-image: url(images/bg2.gif);
	background-repeat: repeat;
}
</style>
</head>
<body>
<table width="600" height="678" border="0" align="center">
  <tr>
    <td height="371">
      <table width="100%" border="1">
        <tr>
          <td width="20%"><div align="right">用户名：</div></td>
          <td width="30%"><label>
            <input type="text" name="user.userName" id="userName" onKeyUp="checkUserName()">
          </label></td>
          <td width="50%"><font id="font1" size="2" color="#808080">6-16位,可以输入字母数字下划线,必须以字母开头</font></td>
        </tr>
        <tr>
          <td><div align="right">设置密码：</div></td>
          <td><label>
            <input type="password" name="user.password" id="password" onKeyUp="checkPasswordIsSame()">
          </label></td>
          <td><font id="font2" size="2" color="#808080">请输入6-16位密码</font></td>
        </tr>
        <tr>
          <td><div align="right">确认密码：</div></td>
          <td><label>
            <input type="password" name="password2" id="password2" onKeyUp="checkPasswordIsSame()">
          </label></td>
          <td><font id="font3" size="2" color="#808080">&nbsp;</font></td>
        </tr>
        <tr>
          <td><div align="right">姓：</div></td>
          <td><label>
            <input type="text" name="user.firstName" id="firstName" onKeyUp="checkFirstName()">
          </label></td>
          <td><font id="font4" size="2" color="#808080">请输入您的姓氏</font></td>
        </tr>
		<tr>
          <td><div align="right">名：</div></td>
          <td><label>
            <input type="text" name="user.secondName" id="secondName" onKeyUp="checkSecondName()">
          </label></td>
          <td><font id="font5" size="2" color="#808080">请输入您的名字</font></td>
        </tr>
        <tr>
          <td><div align="right">性别：</div></td>
          <td><label>
            <input type="radio" name="user.sex" id="sex" value="男" checked="checked">
            		男&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="user.sex" id="sex2" value="女">
            		女</label></td>
          <td><font size="2" color="#808080">请选择性别</font></td>
        </tr>
        <tr>
          <td><div align="right">电子邮件：</div></td>
          <td><label>
            <input type="text" name="user.email" id="email" onKeyUp="checkEmail()">
          </label></td>
          <td><font id="font6" size="2" color="#808080">请输入正确的电子邮件地址</font></td>
        </tr>
        <tr>
          <td height="41" colspan="4" bgcolor="#3366FF"><div align="left">设置密码保护</div></td>
          </tr>
        <tr>
          <td height="38"><div align="right">问题一：</div></td>
          <td><label>
            <input type="text" name="user.question1" id="question1" onKeyUp="checkQuestion1()">
          </label></td>
          <td><font id="font8" size="2" color="#808080">请输入问题一</font></td>
        </tr>
        <tr>
          <td height="32"><div align="right">答案：</div></td>
          <td><label>
            <input type="text" name="user.answer1" id="answer1" onKeyUp="checkAnaswer1()">
          </label></td>
          <td><font id="font9" size="2" color="#808080">请输入问题答案</font></td>
        </tr>
        <tr>
          <td height="37"><div align="right">问题二：</div></td>
          <td><label>
            <input type="text" name="user.question2" id="question2" onKeyUp="checkQuestion2()">
          </label></td>
          <td><font id="font10" size="2" color="#808080">请输入问题二</font></td>
        </tr>
        <tr>
          <td height="40"><div align="right">答案：</div></td>
          <td><label>
            <input type="text" name="user.answer2" id="answer2" onKeyUp="checkAnaswer2()">
          </label></td>
          <td><font id="font11" size="2" color="#808080">请输入问题答案</font></td>
        </tr>
        <tr>
          <td height="42"><div align="right">问题三：</div></td>
          <td><label>
            <input type="text" name="user.question3" id="question3" onKeyUp="checkQuestion3()">
          </label></td>
          <td><font id="font12" size="2" color="#808080">请输入问题三</font></td>
        </tr>
        <tr>
          <td height="38"><div align="right">答案：</div></td>
          <td><label>
            <input type="text" name="user.answer3" id="answer3" onKeyUp="checkAnaswer3()">
          </label></td>
          <td><font id="font13" size="2" color="#808080">请输入问题答案</font></td>
        </tr>
        <tr>
          <td height="46"><div align="right">请输入验证码：</div></td>
          <td><img src="code.jsp" name="pic" border=1 id="pic" /><a href="javaScript:reloadImage();">刷新验证码</a></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="46"><div align="right">&nbsp;</div></td>
          <td><input type="text" id="checkcode" onKeyUp="check()" /></td>
          <td><font id="font14" size="2" color="#808080">&nbsp;</font></td>
        </tr>
		<tr>
          <td height="46"><div align="right">&nbsp;</div></td>
          <td><input type="submit" id="submit" value="确定" onclick="send()" disabled="true"/>&nbsp;&nbsp;&nbsp;<input type="reset" id="submit" value="重填" /></td>
          <td><font id="font2">&nbsp;</font></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="41">&nbsp;</td>
  </tr>
</table>
</body>


</html>